<template>
  <div style="height:100%">
      <MenuAdminAddOne :obj="addOne" :getMenu="getMenu"></MenuAdminAddOne>
       <MenuAdminAddTwo :obj="addTwo" :getMenu="getMenu"></MenuAdminAddTwo>
      <el-container style="height:100%">
        <el-aside width="200px" style="height:100%;border-right:1px solid #f1f1f1;">
            <el-button size="mini" type="primary" style="margin:5px 5%;width:90%;" @click="addOneFn">新增一级菜单</el-button>
            <el-tree 
                v-loading="loading"
                :highlight-current="true" 
                :data="treeData" 
                :props="defaultProps" 
                node-key="id"
                ref="tree"
                default-expand-all
                @node-click="handleNodeClick"
                @check-change="checkChange"
            >
            </el-tree>
        </el-aside>
        <el-main v-show="show">
            <el-form :model="form" style="overflow:hidden;" ref="form">
                <input type="hidden" :value="form.smid"/>
                <input type="hidden" :value="form.ssmid"/>
                <input type="hidden" :value="form.grade"/>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单名" prop="title" label-width="80px">
                            <el-input v-model="form.title" size="small" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单状态" prop="type" label-width="80px">
                            <el-select v-model="form.type" size="small" placeholder="请选择" >
                                <el-option label="显示" value="T"></el-option>
                                <el-option label="隐藏" value="F"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="路由" label-width="80px">
                            <el-input v-model="form.path" size="small" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="icon类" label-width="80px">
                            <el-input v-model="form.iconClass" size="small" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row>
                <el-col :span="2">
                    <div style="width:100%;height:32px;"></div>
                </el-col>
                <el-col :span="20" style="text-align:center;">
                    <el-button type="danger" size="small" icon="el-icon-close" @click="remove">删除</el-button>
                    <el-button type="primary" size="small" icon="el-icon-check" @click="okFn">确 定</el-button>
                    <el-button  type="info" icon="el-icon-plus" v-show="subBtn" size="small" @click="addTwoFn">新增二级</el-button>
                </el-col>
                <el-col :span="2">
                    <div style="width:100%;height:32px;"></div>
                </el-col>
            </el-row>
        </el-main>
      </el-container>
  </div>
</template>
<script>
import MenuAdminAddOne from './MenuAdminAddOne.vue'
import MenuAdminAddTwo from './MenuAdminAddTwo.vue'
import api from '../api'
import {bus} from '../bus.js'
    export default {
        created(){
            let tath=this;
            bus.$on('getMenu',function(res){
                tath.setMenus=res;
            })
        },
        mounted(){
            this.getMenu();
        },
        components:{
            MenuAdminAddOne,
            MenuAdminAddTwo
        },
        methods:{
            setMenus(){

            },
            okFn(){
                this.$confirm('是否修改该菜单?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(this.form);
                    this.loading=true;
                    api.$http("/system/editSystemMenu",this.form,function(err,res){
                        if(res.data.code==1){
                            this.$message({
                            type: 'success',
                            message: '修改成功!'
                            });
                            this.setMenus();
                            this.getMenu();
                        }
                    }.bind(this));
                }).catch(() => {
                        
                });
            },
            addTwoFn(){
                this.addTwo.smid=this.form.smid;
                this.addTwo.isShow=true;
            },
            remove(){
                if(this.form.smid==3
                    ||(this.form.smid==1&&this.form.ssmid==1)
                    ||(this.form.smid==1&&this.form.ssmid==2)
                    ||(this.form.smid==2&&this.form.ssmid==3)
                    ||(this.form.smid==1&&this.form.grade==1)
                    ||(this.form.smid==2&&this.form.grade==1)
                ){
                    this.$message.error(this.form.title+"菜单不能删除");
                }else{
                    this.$confirm('是否删除该菜单?', '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        console.log(this.form);
                        api.$http("/system/removeSystemMenu",this.form,function(err,res){
                        if(res.data.code==1){
                            this.$message({
                            type: 'success',
                            message: '删除成功!'
                            });
                            this.show=false;
                            this.setMenus();
                            this.getMenu();
                        }
                        }.bind(this));
                    }).catch(() => {
                            
                    });
                }
            },
            setCheckedNodes() {
                this.$refs.tree.setCheckedNodes([{
                    id:1,
                    label:"书籍管理"
                }]);
            },
            checkChange(data){
                
            },
            addOneFn(){
                this.addOne.isShow=true;
            },
            handleNodeClick(data) {
                this.show=true;
                if(data.grade==1){
                    this.subBtn=true;
                    this.form={
                        title:data.label,
                        type:data.type,
                        path:data.path,
                        iconClass:data.iconClass,
                        smid:data.smid,
                        ssmid:0,
                        grade:data.grade
                    }
                }else{
                    this.subBtn=false;
                    this.form={
                        title:data.label,
                        type:data.type,
                        path:data.path,
                        iconClass:data.iconClass,
                        smid:data.smid,
                        ssmid:data.ssmid,
                        grade:data.grade
                    }
                }
                
            },
            getMenu(){
                this.loading=true;
                api.$http("/system/getSystemEditMenu",{},function(err,res){
                    let data=res.data;
                    this.listArr=data.info.menu;
                    for(let i=0;i<data.info.menu.length;i++){
                        this.listArr[i].child=data.info.submenu[i];
                    }
                    let html="[";
                    let a=0;
                    for(let val in this.listArr){
                        a++;
                        html+='{"id":'+a+',"label": "'+this.listArr[val].title+'","smid":'+this.listArr[val].smid+',"type":"'+this.listArr[val].type+'","iconClass":"'+this.listArr[val].iconClass+'","createTime":'+this.listArr[val].createTime+',"path":"'+this.listArr[val].path+'","grade":1,';
                        html+='"children":[';
                        for(let item in this.listArr[val].child){
                            a++;
                                html+='{"id":'+a+',"label":"'+this.listArr[val].child[item].title+'","ssmid":'+this.listArr[val].child[item].ssmid+',"smid":'+this.listArr[val].child[item].smid+',"type":"'+this.listArr[val].child[item].type+'","iconClass":"'+this.listArr[val].child[item].iconClass+'","createTime":'+this.listArr[val].child[item].createTime+',"path":"'+this.listArr[val].child[item].path+'","grade":2';
                            if(item==this.listArr[val].child.length-1){
                                html+="}";
                            }else{
                                html+="},";
                            }
                        }
                        html+="]";    
                        if(val==this.listArr.length-1){
                            html+="}";
                        }else{
                            html+="},";
                        }
                    }
                    html+="]";
                    //console.log(JSON.parse(html));
                    this.treeData=JSON.parse(html);
                    this.loading=false;
                }.bind(this))
            },
            addSuccess(){

            },
            addSub(){

            }
        },
        data(){
            return{
                form:{
                    title:"",
                    type:"T",
                    path:"",
                    iconClass:"",
                    smid:0,
                    ssmid:0,
                    grade:1
                },
                loading:false,
                show:false,
                subBtn:false,
                listArr:[],
                treeData:[
                    {
                        "label": "加载中...",
                        "children": [
                            {
                                "label": "加载中..."
                            }
                        ]
                    }
                ],
                 defaultProps: {
                    createTime:'createTime',
                    children: 'children',
                    label: 'label',
                    iconClass:'iconClass',
                    path:'path',
                    smid:'smid',
                    ssmid:'ssmid',
                    id:''
                },
                addOne:{
                    isShow:false,
                    tit:"新增一级菜单"
                },
                addTwo:{
                    isShow:false,
                    tit:"新增二级菜单",
                    smid:"",
                    title:"",
                    type:"T",
                    path:"/system/index/page",
                    iconClass:""
                }
            }
        }
    }
</script>   
<style scoped>
.el-main{
    padding:0;
}
.page-content-right{
    padding:0;
}
</style>

